<template>
  <div class='all'>
    <div>
      <span>请选择要生成代码的表名：</span>
      <el-select size="medium"
                 v-model="tablename"
                 filterable
                 clearable
                 @change="tableChange"
                 placeholder="请选择表">
        <el-option v-for="item in allTablList"
                   :key="item.value"
                   :label=" item.comment ?  item.name+'--'+item.comment : item.name+'---该表未注释'"
                   :value="item.name">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-button type="primary"
                 size="medium"
                 @click="startConfig">开始配置</el-button>
    </div>
    <br>
    <el-alert title="数据库表必须含有id,create_date,update_date,del_flag四个基础字段，否则有错！"
              type="warning">
    </el-alert>
    <br>
    <el-form class="row-form"
             v-show="isShow"
             size="small"
             :model="actionParams"
             ref="actionParamsRef"
             :rules="actionParamsRules"
             label-width="120px"
             :inline="true">
      <el-form-item label="后台模块"
                    prop="backModule">
        <el-input v-model="actionParams.backModule"></el-input>
      </el-form-item>
      <el-form-item label="后台控制器"
                    prop="backController">
        <el-input v-model="actionParams.backController"></el-input>
      </el-form-item>
      <el-form-item label="前台模块"
                    prop="frontModule">
        <el-input v-model="actionParams.frontModule"></el-input>
      </el-form-item>
      <el-form-item label="前台控制器"
                    prop="frontController">
        <el-input v-model="actionParams.frontController"></el-input>
      </el-form-item>
      <el-form-item label="描述关键字"
                    prop="descKeywords">
        <el-input v-model="actionParams.descKeywords"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning"
                   :loading="doLoading"
                   @click="doCreateCode">生成代码</el-button>
        <el-button @click="$refs.actionParamsRef.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格的列信息 -->
    <div class="table-bg">
      <el-table :data="allColumnsList"
                border>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="字段名"
                         prop="name"></el-table-column>
        <el-table-column label="字段注释">
          <template slot-scope="{row}">
            <el-input v-model="row.comment"
                      size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否列表中显示"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_show"
                       active-text="是"
                       inactive-text="否"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否为搜索条件"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_search"
                       active-text="是"
                       inactive-text="否"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="搜索匹配模式"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.search_mode"
                       active-text="严格"
                       inactive-text="模糊"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="是否在 添加/修改 表单中"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_form"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getTableListData, getColumnsListData, createCodeAction } from '@/api/system/generator'
export default {
  name: 'all',
  components: {},
  props: {},
  data () {
    return {
      isShow: false,
      // 所有表格数据
      allTablList: [],
      // 表名
      tablename: '',
      // 列信息
      allColumnsList: [],
      // 创建参数
      actionParams: {
        backModule: '', // 后台模块
        backController: '', // 后台控制器
        frontModule: '', // 前台模块
        frontController: '',
        descKeywords: '' // 前台控制器
      },
      actionParamsRules: {
        backModule: [{ required: true, message: '请输入后台模块名' }],
        backController: [{ required: true, message: '请输入后台控制器' }], // 后台控制器
        frontModule: [{ required: true, message: '请输入前台模块' }], // 前台模块
        frontController: [{ required: true, message: '请输入前台控制器' }], // 前台控制器
        descKeywords: [{ required: true, message: '请输入前台控制器' }] // 描述关键文字
      },
      doLoading: false // 是否生成中
    }
  },
  async mounted () {
    this.allTablList = await getTableListData()
  },
  methods: {
    tableChange () {
      this.$refs.actionParamsRef.resetFields()
      this.isShow = false
      this.allColumnsList = []
    },
    // 配置表列信息
    async startConfig () {
      this.allColumnsList = await getColumnsListData({
        tablename: this.tablename
      })
      this.isShow = true
    },
    // 生成代码
    async doCreateCode () {
      const valid = await this.$refs.actionParamsRef.validate()
      if (!valid) return this.$message.warning('验证失败')
      this.doLoading = true
      // 发请求
      const data = {
        ...this.actionParams,
        tablename: this.tablename,
        type: 'all',
        allColumnsList: this.allColumnsList
      }
      const res = await createCodeAction(data)
      this.$message.success(res.msg)
      this.tablename = ''
      this.$refs.actionParamsRef.resetFields()
      this.isShow = false
      this.doLoading = false
    }
  }
}
</script>
<style scoped>
</style>
